<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/vant.css">
    <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />

</head>
<!-- 引用组件 -->
<script src="./js/vue.js"></script>
<script src="./js/vant.js"></script>
<script src="./js/axios.js"></script>

<style>
    /* 轮播图 */
    .van-swipe__indicators {
        left: 88%;
    }

    /* 最高权限 !important */
    .van-swipe__indicator--active {
        width: 18px !important;
        border-radius: 23%;
        transition: .6s;
    }
</style>

<body>
    <div id="app">

        <!-- 第一页 -->
        <div v-if="linum==1">

            <!-- 标题栏 -->
            <!-- 问题点 -->
            <top-tab v-bind:date="date" v-bind:month="month" v-bind:hello="hello" v-on:touxiang_dianji="linum = $event"
                :class="{'black-top-tab':active2 ,'.black-top-tab .left':active2}">
            </top-tab>

            <!-- 标题栏 -->

            <div class="content">
                <!-- 轮播图 -->
                <div class="myswip">
                    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                        <van-swipe-item v-for="item in latestTop" @click="story_dianji(item.id)" :key="item.id">
                            <div class="swipe-div">
                                <img v-bind:src="item.image">
                                <div class="bag"
                                    :style="{background: `linear-gradient(#${item.image_hue.substr(2)}00,#${item.image_hue.substr(2)}e6,#${item.image_hue.substr(2)})`}">
                                    <div class="img-msg">
                                        <h2>{{item.title}}</h2>
                                        <h4>{{item.hint}}</h4>
                                    </div>
                                </div>
                            </div>
                        </van-swipe-item>
                    </van-swipe>
                </div>
                <!-- 轮播图 -->

                <!-- 阅读菜单 -->
                <read-list v-bind:latest_stories="latest_stories" v-on:story_dianji="story_dianji"
                    :class="{'black-read-list':active2 , 'black-read-list .read-ul':active2}"></read-list>
                <!-- 阅读菜单 -->


            </div>
        </div>

        <!-- 第二页 -->
        <div v-if="linum==2">
            <div class="detail">
                <!-- 置顶背景图 -->
                <link rel="stylesheet" :href="shujucss">
                <div class="detail-top">
                    <img :src="shuju.image">
                    <div class="bag"
                        :style="{background: `linear-gradient(#${shuju.imageHue.substr(2)}00,#${shuju.imageHue.substr(2)}e6,#${shuju.imageHue.substr(2)})`}">
                        <h1>{{shuju.title}}</h1>
                    </div>
                </div>
                <!-- 置顶背景图 -->

                <!-- 文章 -->
                <div :class="{article:active2}" v-html="shuju.body"></div>
                <!-- 文章 -->

                <!-- 底部导航栏 -->
                <div class="bottem-tab">
                    <van-tabbar v-model="active">
                        <!-- 返回 -->
                        <van-tabbar-item name="return" @click="linum=1">
                            <template #icon="props">
                                <img src="image/return.png" />
                            </template>
                        </van-tabbar-item>
                        <!-- 评论 -->
                        <van-tabbar-item name="comment" badge="4" @click="linum=3">
                            <template #icon="props">
                                <img :src="active3 == false ? icon.active1[0] : icon.inactive1[0]" />
                            </template>
                        </van-tabbar-item>
                        <!-- 点赞  @click="addid(shuju.id)" :class="{active : dianzan(shuju.id)-->
                        <van-tabbar-item name="liked" :info="zanshu" @click="dianzan()">
                            <template #icon="props">
                                <img :src="active4 == false ? icon.active1[1] : icon.inactive1[1]" />
                            </template>
                        </van-tabbar-item>
                        <!-- 收藏 -->
                        <van-tabbar-item name="collect" @click="shouchang()">
                            <template #icon="props">
                                <img :src="active5 == false ? icon.active1[2] : icon.inactive1[2]" />
                            </template>
                        </van-tabbar-item>
                        <!-- 分享 -->
                        <van-tabbar-item name="share">
                            <template #icon="props">
                                <img src="./image/share2.png" />
                            </template>
                        </van-tabbar-item>

                    </van-tabbar>
                </div>
                <!-- 底部导航栏 -->
            </div>
        </div>

        <!-- 第三页 -->
        <div v-if="linum==3">
                <div :class="{'comment-tab':active2}">
                    <div>
                        <van-nav-bar title="3条评论" left-arrow @click-left="linum=2" />
                    </div>
                </div>
                <div :class="{'zhengti':active2}">
                    <span class="comment-num">2条短评</span>
                    <div v-for="pl in short">
                        <div class="pl-left">
                            <div class="pl-head">
                                <img :src="pl.avatar" class="pl-touxiang">
                                <span class="pl-yonghu">{{pl.author}}</span>
                                <img src="./image/shengluehao.jpg" class="shengluehao">
                            </div>
                            <p class="pl-content">{{pl.content}}</p>
                            <div class="pl-tubiao">
                                <div class="tubiao">
                                    <p>
                                        <img class="c2" @click="addid(pl.id)"
                                            :src=" pldianzan(pl.id)  ? './image/liked_col.png' : './image/liked.png' ">
                                        <img class="c3" @click="addid1(pl.id)"
                                            :src=" plshoucang(pl.id)  ? './image/collect_col.png' : './image/collect.png'">
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <span class="comment-num">1条长评</span>
                    <div v-for="pl in long" class="longpin">
                        <div class="pl-left">
                            <div class="pl-head">
                                <img :src="pl.avatar" class="pl-touxiang">
                                <span class="pl-yonghu">{{pl.author}}</span>
                                <img src="./image/shengluehao.jpg" class="shengluehao">
                            </div>
                            <p class="pl-content">{{pl.content}}</p>
                            <div class="pl-tubiao">
                                <div class="tubiao">
                                    <p>
                                        <img class="c2" @click="long_pldianzan()"
                                            :src=" active8 == false ? './image/liked.png  ' : './image/liked_col.png ' ">
                                        <img class="c3" @click="long_plshoucang()"
                                            :src=" active9 == false ? './image/collect.png ' : './image/collect_col.png '">
                                    </p>
                                </div>
                                <div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pl-dibu">
                        <div class="pinglun">
                            <img src="./image/touxiang.png">
                            <input type="text" placeholder="说说你的看法...">
                        </div>
                        <div class="anniu"></div>
                    </div>
                </div>

        </div>

        <!-- 第四页 -->
        <div v-if="linum==4">
            <div :class="{'geren-tab':active2}">
                <van-nav-bar left-arrow @click-left="linum=1" />
            </div>
            <div class="geren-content" :class="{'black-geren-content':active2}">
                <div class="geren-touxiang">
                    <img src="./image/per_touxiang.png">
                    <p>林涛</p>
                </div>
                <div :class="{'geren-menu':active2}">
                    <van-cell-group>
                        <van-cell title="我的收藏" is-link />
                    </van-cell-group>
                    <van-cell-group>
                        <van-cell title="消息中心" is-link />
                    </van-cell-group>
                </div>
                <div class="longbag"></div>
                <div class="bottom-set">
                    <div class="moon" @click="moon()">
                        <img name="moon" :src="active2 == false ? './image/moon.png' : './image/black-moon.png'">
                        <span>夜间模式</span>
                    </div>
                    <div class="set">
                        <img name="set" :src="active2 == false ? './image/set.png' : './image/black-set.png'">
                        <span>设置</span>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 引入组件 -->
    <script src="./js/top-tab.js"></script>
    <script src="./js/read-list.js"></script>
    <script src="./js/my-swip.js"></script>
    <!-- 引入数据 -->
    <script src="./js/shuju/latest.js"></script>
    <script src="./js/shuju/story.js"></script>
    <script src="./js/shuju/comments.js"></script>

    <script>
        new Vue({
            el: "#app",
            data: {
                // 修改点
                linum: 1,
                current: 0,
                shuju: '',
                latestTop: latest.top_stories,
                latest_stories: latest.stories,
                shujucss: null,
                active: 0,
                active2: false,
                active3: false,

                active4: false,
                active5: false,

                active8: false,
                active9: false,

                touxiang: 0,
                icon: {
                    active1: ['./image/comment.png', './image/liked.png', './image/collect.png'],
                    inactive1: ['./image/comment_col.png', './image/liked_col.png', './image/collect_col.png'],
                },
                zanshu: '20',
                // flag: false,
                clickID: [],
                clickTime: [],
                short: comments.short,
                long: comments.long,
                shou: 1,
                content: "",
                arr: [],

            },

            methods: {

                story_dianji(id) {
                    this.linum = 2;
                    var s_id = "s" + id;
                    console.log(s_id);
                    this.shuju = story[s_id].story;
                    this.shujucss = story[s_id].story.css[0]
                    console.log(this.shuju);
                },
                touxiang_dianji(event) {
                    this.linum = 4;
                },

                // 点赞
                dianzan() {
                    this.active4 = !this.active4;
                    if (this.flag) {
                        this.zanshu = parseInt(this.zanshu) - 1
                        this.flag = false;
                    } else {
                        this.zanshu = parseInt(this.zanshu) + 1
                        this.flag = true;
                    }
                },

                shouchang() {
                    this.active5 = !this.active5;
                    if (this.flag1) {
                        this.flag1 = false;
                    } else {
                        this.flag1 = true;
                    }
                },



                moon() {
                    this.active2 = !this.active2;
                },

                // 评论页面点赞和收藏
                // short_pldianzan() {
                //     this.active6 = !this.active6;
                // },

                // short_plshoucang() {
                //     this.active7 = !this.active7;
                // },

                long_pldianzan() {
                    this.active8 = !this.active8;
                },

                long_plshoucang() {
                    this.active9 = !this.active9;
                },

                // 点赞
                addid(id) {
                    if (!this.dianzan(id)) {
                        this.clickID.push(id);
                    } else {
                        for (let i = 0; i < this.clickID.length; i++) {
                            if (this.clickID[i] == id) {
                                this.clickID.splice(i, 1);
                            }
                        }
                    }
                },

                pldianzan(id) {
                    var set = new Set(this.clickID);
                    if (set.has(id)) {
                        return true;
                    } else {
                        return false;
                    }
                },

                addid1(time) {
                    if (!this.plshoucang(time)) {
                        this.clickTime.push(time)
                    } else {
                        for (let i = 0; i < this.clickTime.length; i++) {
                            if (this.clickTime[i] == time) {
                                this.clickTime.splice(i, 1)
                            }
                        }
                    }
                },
                plshoucang(time) {
                    var set = new Set(this.clickTime);
                    if (set.has(time)) {
                        return true;
                    } else {
                        return false;
                    }

                }

                // 请求数据,后面动态编写时再使用

                // getRes() {
                //     axios({
                //         method: "GET",
                //         url: "https://apis.netstart.cn/zhihudaily/stories/latest",
                //     }).then(res => {
                //         console.log(res);
                //         this.newdata = res.data
                //     })
                // },
                // 生命周期,后面动态编写时再使用
                // created() {
                //     this.getRes();
                //     this.getstory();
                // }
            },
            computed: {
                // 时间计算属性
                month() {
                    var day = new Date();
                    var month = day.getMonth() + 1;
                    var china_month = ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"];
                    return `${china_month[month - 1]}月`;
                },
                date() {
                    var day = new Date();
                    var date = day.getDate();
                    return `${date < 10 ? '0' + date : date}`
                },
                hello() {
                    var day = new Date();
                    var time = day.getHours();
                    var hello = ["早上好", "下午好", "晚上好"];
                    var num = 0;
                    if (time >= 6 && time < 12) {
                        num = 0;
                    } else if (time >= 12 && time < 18) {
                        num = 1;
                    } else if (time >= 18 && time < 24 || time >= 0 && time < 6) {
                        num = 2;
                    }
                    return `${hello[num]}!`;
                }

            },

        },
        )
        // 引用vant组件
        Vue.use(vant.Lazyload);
    </script>
</body>

</html>